<template>
	<view class="home">
		<!-- 搜索栏 -->
		<view class="search-bar">
			<view class="search-input" @tap="handleSearch">
				<uni-icons type="search" size="16" color="#999"></uni-icons>
				<text class="placeholder">请输入小区或商圈名称</text>
			</view>
		</view>
		
		<!-- 筛选条件 -->
		<view class="filter-bar">
			<view 
				v-for="(item, index) in filterItems" 
				:key="index"
				class="filter-item"
				@tap="handleFilter(index)"
			>
				<text :class="{'active': item.active}">{{item.name}}</text>
				<uni-icons :type="item.active ? 'up' : 'down'" size="12" color="#666"></uni-icons>
			</view>
		</view>

		<!-- 房源列表 -->
		<view class="house-list-container">
			<scroll-view 
				scroll-y 
				class="house-list"
				@scrolltolower="loadMore"
				:refresher-enabled="true"
				:refresher-triggered="isRefreshing"
				@refresherrefresh="onRefresh"
			>
				<house-card
					v-for="house in houseList"
					:key="house.id"
					:house="house"
					@tap="goToDetail(house.id)"
				></house-card>
				
				<uni-load-more :status="loadMoreStatus"></uni-load-more>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import HouseCard from '../../components/house-card/index.vue'

export default {
	components: {
		HouseCard
	},
	data() {
		return {
			filterItems: [
				{ name: '区域', active: false },
				{ name: '租金', active: false },
				{ name: '户型', active: false },
				{ name: '筛选', active: false }
			],
			houseList: [],
			page: 1,
			loadMoreStatus: 'more', // more-加载前 loading-加载中 noMore-没有更多
			isRefreshing: false
		}
	},
	onLoad() {
		this.getHouseList()
	},
	methods: {
		// 获取房源列表
		async getHouseList(type = 'add') {
			try {
				this.loadMoreStatus = 'loading'
				// 模拟接口请求
				const res = await new Promise(resolve => {
					setTimeout(() => {
						resolve({
							list: Array(10).fill().map((_, index) => ({
								id: this.page * 10 + index,
								title: '整租·观湖智造创意园·2室1厅',
								area: '80㎡',
								price: '4500',
								tags: ['近地铁', '随时看房'],
								location: '望京',
								imageUrl: '/static/images/house-demo.jpg'
							}))
						})
					}, 500)
				})
				
				if (type === 'refresh') {
					this.houseList = res.list
				} else {
					this.houseList = [...this.houseList, ...res.list]
				}
				
				this.loadMoreStatus = this.page >= 3 ? 'noMore' : 'more'
			} catch (e) {
				this.loadMoreStatus = 'more'
				uni.showToast({
					title: '加载失败',
					icon: 'none'
				})
			}
		},
		
		// 搜索
		handleSearch() {
			uni.navigateTo({
				url: '/src/pages/house/search'
			})
		},
		
		// 筛选
		handleFilter(index) {
			this.filterItems = this.filterItems.map((item, i) => ({
				...item,
				active: i === index ? !item.active : false
			}))
		},
		
		// 查看详情
		goToDetail(id) {
			uni.navigateTo({
				url: `/src/pages/house/detail?id=${id}`
			})
		},
		
		// 加载更多
		loadMore() {
			if (this.loadMoreStatus !== 'more') return
			this.page++
			this.getHouseList()
		},
		
		// 下拉刷新
		async onRefresh() {
			this.isRefreshing = true
			this.page = 1
			await this.getHouseList('refresh')
			this.isRefreshing = false
		}
	}
}
</script>

<style lang="less">
@import '../../styles/uni.less';

.home {
	height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: @bg-color-grey;
}

.search-bar {
	background-color: @bg-color;
	padding: @spacing-md;
	flex-shrink: 0; // 防止搜索栏被压缩
	
	.search-input {
		display: flex;
		align-items: center;
		background-color: @bg-color-grey;
		height: 72rpx;
		border-radius: @border-radius-md;
		padding: 0 @spacing-md;
		
		.placeholder {
			margin-left: @spacing-sm;
			color: @text-color-light;
			font-size: @font-size-md;
		}
	}
}

.filter-bar {
	display: flex;
	background-color: @bg-color;
	padding: @spacing-sm @spacing-md;
	margin-bottom: @spacing-sm;
	flex-shrink: 0; // 防止筛选栏被压缩
	
	.filter-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		
		text {
			margin-right: 4rpx;
			font-size: @font-size-md;
			color: @text-color;
			
			&.active {
				color: @primary-color;
			}
		}
	}
}

.house-list-container {
	flex: 1;
	overflow: hidden; // 防止出现双滚动条
}

.house-list {
	height: 100%;
}
</style>
